<template>
  <div class="tmpl">
    <h1>父组件传值为 {{message}}</h1>
    <input type="text" placeholder="请输入子组件内容" v-model="param">
    <button @click="sendParam">通信父组件</button>
    <slot></slot>
  </div>
</template>

<script>
import EventHandler from '@/assets/js/EventHandler.js'
export default {
  name: 'Bar',
  props: {
    message: {
      type: String,
      default: '默认为空'
    }
  },
  data () {
    return {
      param: ''
    }
  },
  methods: {
    sendParam: function () {
      var param = this.param
      this.$emit('showMsg', param)
      EventHandler.$emit('showMsg', param)
    }
  }
}
</script>

<style scoped>
h1 {
  font-weight: normal;
}
.tmpl {
  border: 1px solid #333;
  padding: 30px;
}
</style>
